<template>
	<view :data-theme="theme" class="container">
		<!-- <view class="header">头部内容</view> -->
		<view class="content">
			<!-- 这里是可滚动的内容 -->
			<scroll-view class="scroll-view"  @scrolltolower="scrolltolowerFn" scroll-y>
				<view class="scroll-view-inner" style="height: 100%;"> <!-- 内容区域 -->
					<base-page-list ref="tab" @toDetails="toDetails"></base-page-list>
				</view>
			</scroll-view>
		</view>
		<!-- <view class="footer">底部内容</view> -->
	</view>
</template>

<script>
	import basePageList from '../compontents/nvue-base-page-list.vue';
	import {
		setThemeColor
	} from '../../../utils/setTheme';
	let app = getApp();
	export default {
		components: {
			basePageList
		},
		data() {
			return {
				bgColor: "#ffffff",
				theme: app.globalData.theme,
			};
		},
		onLoad() {
			this.bgColor = setThemeColor()
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.bgColor,
			});
		},
		methods: {
			scrolltolowerFn() {
				this.$refs.tab.scrolltolowerFn();
			},
			toDetails(value){
				this.goPage(`/pages/finance/baseDetail/baseDetail?data=${value.closingNo}`);
			},
			goPage(url){
				uni.navigateTo({
					url
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
	}

	.container {
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	// .header {
	// 	height: 100px;
	// 	background-color: lightblue;
	// }

	.content {
		flex: 1;
		overflow: hidden;
	}

	.scroll-view {
		height: 100%;
	}

	.scroll-view-inner {
		height: 100%;
		/* 根据实际情况设置高度 */
		// background-color: #fff;
		/* 内容区域背景色 */
	}
</style>